import { ChangeEvent, FC, useEffect, useState } from "react";
import useGetQuestion from "../../hooks/useGetQuestion";
import style from "./index.module.scss";
import classnames from "classnames/bind";
import { EyeOutlined, LockOutlined } from "@ant-design/icons";
import { Button, Flex, Input, Space } from "antd";
import { setSelectedId, toggleHideComponent, toggleLockComponent, changeTitleComponent, moveComponent } from "../../store/ComponentReducer";
import { useDispatch } from "react-redux";
import SortDndContext from "../../components/SortDndContext";
import SortableItem from "../../components/SortableItem";
import { QuestionInfoType } from "../../store/ComponentReducer";

const CBN = classnames.bind(style);
const LayerList: FC = () => {
  const dispatch = useDispatch();
  const { selectedId, componentList } = useGetQuestion();
  const ChangeSelectId = (id: string) => {
    dispatch(setSelectedId(id));
  };
  const changehide = (hide: boolean) => {
    dispatch(toggleHideComponent({ fe_id: selectedId, ishide: hide }))
  }


  const changelock = (lock: boolean) => {
    dispatch(toggleLockComponent({ fe_id: selectedId, islock: lock }))
  }

  const titleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    dispatch(changeTitleComponent({ id: selectedId, value: value }))
  }

  //选中点击修改组件标题
  let [activeSelect, setactiveSelect] = useState('')


  useEffect(() => {
    setactiveSelect('')
  }, [selectedId])

  const ondrag = (oldIndex: number, newIndex: number) => {
    console.log('hahah',oldIndex, newIndex)
    dispatch(moveComponent({oldIndex, newIndex}))
  }
  //  选项携带id值
  const componentListWidthId = componentList.map((item: QuestionInfoType) => {
    return {
      id: item.fe_id,
      ...item
    }
  })

  return (
    <SortDndContext items={componentListWidthId} ondrag={ondrag}>
    <Flex vertical className={CBN("LayerList")} gap={"small"}>
      {componentList.map((item) => {
        const { title, fe_id, lock, hide } = item;
        const CombineClass = CBN({
          layerItem: true,
          selected: fe_id === selectedId,
        });
        return (
          <SortableItem key={fe_id} id={fe_id}>
          <Flex
            key={fe_id}
            justify="space-between"
            className={CombineClass}
            align="center"
            onClick={() => {

              ChangeSelectId(fe_id);
            }}
          >
            <div onClick={() => { setactiveSelect(fe_id) }} style={{ marginRight: '4px' }}>{activeSelect === fe_id ? <Input defaultValue={title} onChange={titleChange}></Input> : title}</div>
            <div>
              <Space>
                <Button
                  onClick={() => {
                    const ishide = hide ? false : true
                    changehide(ishide)
                  }}
                  shape="circle"
                  type={hide ? "primary" : "default"}
                  icon={<EyeOutlined></EyeOutlined>}
                ></Button>
                <Button
                  onClick={() => {
                    const islock = lock ? false : true
                    changelock(islock)
                  }}
                  shape="circle"
                  type={lock ? "primary" : "default"}
                  icon={<LockOutlined></LockOutlined>}
                ></Button>
              </Space>
            </div>
          </Flex>
          </SortableItem>
        );
      })}
    </Flex>
    </SortDndContext>
  );
};

export default LayerList;
